<template>
  <div class="question-psreview">
    <!-- <el-dialog title="题目预览"  v-bind="$attrs" v-on="$listeners"> -->
    <el-dialog title="题目预览" :visible.sync="dialogFormVisible" @close="dialogFormH">
      <!-- 题目分析 -->
      <el-row>
        <el-col :span="6">【题型】：{{questionInfo.questionType | questionType }}</el-col>
        <el-col :span="6">【编号】：{{questionInfo.id}}</el-col>
        <el-col :span="6">【难度】：{{questionInfo.difficulty | difficulty}}</el-col>
        <el-col :span="6">【标签】：{{questionInfo.tags}}</el-col>
      </el-row>
      <el-row>
        <el-col :span="6">【学科】：{{questionInfo.subjectName}}</el-col>
        <el-col :span="6">【目录】：{{questionInfo.directoryName}}</el-col>
        <el-col :span="6">【方向】：{{questionInfo.direction}}</el-col>
      </el-row>
      <hr />

      <!-- 题干 -->
      <el-row>【题干】：</el-row>
      <p style="color: #0000ff;" v-html="questionInfo.question"></p >
      <el-row>{{questionInfo.questionType | questionType}} {{ questionInfo.questionType === '3' ? '' : '选项：(以下选中的选项为正确答案)' }}</el-row>

      <!-- 单选 -->
      <div v-if="questionInfo.questionType !== '3'">
        <el-row v-for="item in questionInfo.options" :key="item.id">
        <el-radio
          v-model="radio"
          :label="item.isRight"
          disabled
        >
          <span style="margin-right: 10px">{{ item.code }}</span>
          {{ item.title }}
        </el-radio>
      </el-row>
      </div>
      <hr />

      <el-row >
        【参考答案】：
        <el-button size="mini" @click="mvLoad = !mvLoad" type="danger">视频答案预览</el-button>
      </el-row>
      <!-- 视频控件 -->
      <video v-if="mvLoad" :src="questionInfo.videoURL" controls autoplay></video>
      <hr />

      <el-row >【答案解析】：<span v-html="questionInfo.answer"></span></el-row>
      <hr />
      <el-row >【题目备注】：<span v-html="questionInfo.remarks "></span></el-row>

      <!-- 关闭按钮 -->
      <el-row type="flex" justify="end"><el-button type="primary" @click="dialogFormH">关闭</el-button></el-row>
    </el-dialog>
  </div>
</template>
<script>
// @说明: 基础题库 => 题目预览

import { questionType, difficulty } from '@/api/hmmm/constants.js'
export default {
  name: 'QuestionPsreview',
  props: {
    //  dialogFormVisible: { type: Boolean, required: true},
    questionInfo: {
      type: Object,
      default: () => ({})
    }
  },
  data () {
    return {
      // form:{},
      // 弹窗状态
      dialogFormVisible: false,
      // 单选状态
      radio: 1,
      // 视频显示
      mvLoad: false
    }
  },
  computed: {},
  methods: {
    // 弹层显示
    dialogFormV () {
      this.dialogFormVisible = true
    },
    // 弹层隐藏
    dialogFormH () {
      this.dialogFormVisible = false

        // this.$emit('close')
      }
  },

  // 过滤器
  filters: {
    // 类型
    questionType (val) {
      if (questionType.find(item => item.value === +val)) {
        return questionType.find(item => item.value === +val).label
      }
    },

    // 难度
    difficulty (val) {
      if (difficulty.find(item => item.value === +val)) {
        return difficulty.find(item => item.value === +val).label
      }
    }
  }
}
</script>
<style>
.el-form--label-left .el-form-item__label {
  text-align: right;
}
.el-form-item--medium {
  margin-bottom: 22px;
}
.el-dialog__footer {
  text-align: center;
}
.el-row {
  margin: 10px 0;
}
</style>